<template>
  <div class="attr-list">
    <CommonAttr />
    <px-form>
      <px-form-item label="title">
        <px-input
          v-model="
            //@ts-ignore
            curComponent.propValue.title
          "
        />
      </px-form-item>

      <px-form-item label="collapsed">
        <px-radio-group
          v-model="
            //@ts-ignore
            curComponent.propValue.collapsed
          "
          class="ml-4"
        >
          <px-radio :label="true" size="large">开启</px-radio>
          <px-radio :label="false" size="large">关闭</px-radio>
        </px-radio-group>
      </px-form-item>

      <px-form-item label="titleIconName">
        <px-input
          v-model="
            //@ts-ignore
            curComponent.propValue.iconName
          "
        />
      </px-form-item>
      <px-form-item label="图例名称">
        <px-input
          v-model="
            //@ts-ignore
            curComponent.propValue.option.legend.data[0]
          "
          @input="legendNameChange(0)"
        />
        <px-input
          v-model="
            //@ts-ignore
            curComponent.propValue.option.legend.data[1]
          "
          @input="legendNameChange(1)"
        />
      </px-form-item>
      <px-form-item label="坐标名称及单位">
        <px-input
          v-model="
            //@ts-ignore
            curComponent.propValue.option.yAxis[0].name
          "
        />
        <px-input
          v-model="
            //@ts-ignore
            curComponent.propValue.option.yAxis[1].name
          "
        />
      </px-form-item>
      <px-form-item label="display">
        <px-input
          v-model="
            //@ts-ignore
            curComponent.style.display
          "
        />
      </px-form-item>
      <!-- <px-form-item label="饼图位置">
        <px-input
          v-model="
            //@ts-ignore
            curComponent.propValue.option.series[0].center[0]
          "
        />
        <px-input
          v-model="
            //@ts-ignore
            curComponent.propValue.option.series[0].center[1]
          "
        />
      </px-form-item> -->
    </px-form>
  </div>
</template>

<script setup lang="ts">
import CommonAttr from "@visual/custom-component/common/CommonAttr.vue";
import { useComponent } from "@visual/stores";
import { storeToRefs } from "pinia";
const componentStore = useComponent();
const { curComponent } = storeToRefs(componentStore);
function legendNameChange(i) {
  //@ts-ignore
  curComponent.propValue.option.series[i].name = curComponent.propValue.option.legend.data[i];
}
</script>
